<template>
  <!-- 页面主容器，设置内边距、外边距、最小高度和背景颜色 -->
  <div class="contationAccount">
    <!-- 搜索表单区域 -->
    <div>
      <!-- Element UI 表单组件，使用内联布局，绑定表单数据对象 formInline -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 表单项目：商品名称 -->
        <el-form-item label="商品名称">
          <!-- 输入框，绑定表单数据中的 name 字段，提供输入提示 -->
          <el-input v-model="formInline.name" placeholder="请填写商品名称"></el-input>
        </el-form-item>
        <!-- 表单项目：商品类别 -->
        <el-form-item label="商品类别">
          <!-- 下拉选择框，绑定表单数据中的 sid 字段，提供选择提示 -->
          <el-select v-model="formInline.sid" placeholder="请选择商品类别">
            <!-- 循环渲染商品类别选项 -->
            <el-option :label="item.sname" :value="item.sid" v-for="item in SData" :key="item.sid"></el-option>
          </el-select>
        </el-form-item>
        <!-- 表单项目：交易方式 -->
        <el-form-item label="交易方式">
          <!-- 下拉选择框，绑定表单数据中的 deal 字段，提供选择提示 -->
          <el-select v-model="formInline.deal" placeholder="请选择交易方式">
            <!-- 下拉选项：线上交易 -->
            <el-option label="线上交易" value="线上交易"></el-option>
            <!-- 下拉选项：线下交易 -->
            <el-option label="线下交易" value="线下交易"></el-option>
          </el-select>
        </el-form-item>
        <!-- 表单项目：商品状态 -->
        <el-form-item label="商品状态">
          <!-- 下拉选择框，绑定表单数据中的 status 字段，提供选择提示 -->
          <el-select v-model="formInline.status" placeholder="请选择商品状态">
            <!-- 下拉选项：发布中 -->
            <el-option label="发布中" value="1"></el-option>
            <!-- 下拉选项：已下架 -->
            <el-option label="已下架" value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- 表单项目：查询和重置按钮 -->
        <el-form-item>
          <!-- 主要按钮，点击触发 loadData 方法进行商品数据查询 -->
          <el-button type="primary" @click="loadData">查询</el-button>
          <!-- 主要按钮，点击触发 RestSubmit 方法重置表单并重新加载商品数据 -->
          <el-button type="primary" @click="RestSubmit">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 商品列表和分页区域 -->
    <div>
      <!-- Element UI 表格组件，绑定表格数据，设置边框和宽度 -->
      <el-table
        :data="ProductData.slice((currentPage - 1) * PageSize, currentPage * PageSize)"
        border
        style="width: 100%">
        <!-- 表格列：ID -->
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <!-- 表格列：商品名称，当内容过长时显示 tooltip -->
        <el-table-column prop="name" label="商品名称" width="200" :show-overflow-tooltip="true"> </el-table-column>
        <!-- 表格列：商品类别 -->
        <el-table-column prop="sname" label="商品类别" width="100"> </el-table-column>
        <!-- 表格列：点击量 -->
        <el-table-column prop="clicks" label="点击量" width="80">  </el-table-column>
        <!-- 表格列：原价 -->
        <el-table-column prop="originalprice" label="原价" width="90">  </el-table-column>
        <!-- 表格列：现价 -->
        <el-table-column prop="currentprice" label="现价" width="90">  </el-table-column>
        <!-- 表格列：交易方式 -->
        <el-table-column prop="deal" label="交易方式" width="100">  </el-table-column>
        <!-- 表格列：交易地址，当内容过长时显示 tooltip -->
        <el-table-column prop="address" label="交易地址" width="200" :show-overflow-tooltip="true"> </el-table-column>
        <!-- 表格列：交易状态，使用模板自定义显示内容 -->
        <el-table-column prop="status" label="交易状态" width="100">
          <template slot-scope="scope">
            <!-- 根据 status 值显示发布中或已下架 -->
            <span>{{scope.row.status == 1 ? '发布中' : '已下架'}}</span>
          </template>
        </el-table-column>
        <!-- 表格列：首页推荐，使用开关组件显示推荐状态 -->
        <el-table-column prop="status" label="首页推荐" width="200">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.pid != 0"
              disabled>
            </el-switch>
          </template>
        </el-table-column>
        <!-- 表格列：操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 如果商品状态为已下架，显示发布按钮 -->
            <el-button v-if="scope.row.status == 2" @click="statusClick(scope.row.id, 1)" type="text" size="small">发布</el-button>
            <!-- 如果商品状态为发布中，显示下架按钮 -->
            <el-button v-if="scope.row.status == 1" @click="statusClick(scope.row.id, 2)" type="text" size="small">下架</el-button>
            <!-- 编辑按钮，点击触发 loadProductDetail 方法加载商品详情 -->
            <el-button type="text" size="small" @click="loadProductDetail(scope.row)">编辑</el-button>
            <!-- 如果商品状态为发布中且未被推荐，显示推荐按钮 -->
            <el-button v-if="scope.row.status == 1 && scope.row.pid == 0" @click="toRecommend(scope.row.id, 1)" type="text" size="small">推荐</el-button>
            <!-- 如果商品已被推荐，显示取消推荐按钮 -->
            <el-button v-if="scope.row.pid != 0" @click="toRecommend(scope.row.id, 2)" type="text" size="small">取消推荐</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- Element UI 分页组件，设置分页相关属性和事件 -->
      <el-pagination
        background
        :page-sizes="[12, 20, 30, 40]"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ProductData.length"
        @current-change="CurrentChange"
        @size-change="SizeChange"
      >
      </el-pagination>
    </div>

    <!-- 修改商品弹出层 -->
    <el-dialog
      title="修改商品信息"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="closedialog"
      :close-on-click-modal="false"
    >
      <div>
        <!-- Element UI 表单组件，绑定表单数据对象 productItemData，设置验证规则 -->
        <el-form ref="productItemData" :model="productItemData" :rules="rules" label-width="80px">
          <!-- 表单第一行 -->
          <el-row>
            <!-- 商品名称输入框 -->
            <el-col :span="8">
              <el-form-item label="商品名称" prop="name">
                <el-input v-model="productItemData.name"></el-input>
              </el-form-item>
            </el-col>
            <!-- 商品类别选择框 -->
            <el-col :span="8" :offset="1">
              <el-form-item label="商品类别" prop="sid">
                <!-- 级联选择器，选择商品类别 -->
                <el-cascader v-model="productItem" @change="updateSid" :options="productTypeItem" :props="{ expandTrigger: 'hover' }"></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 表单第二行 -->
          <el-row>
            <!-- 商品售价输入框 -->
            <el-col :span="8">
              <el-form-item label="商品售价" prop="currentprice">
                <el-input v-model.number="productItemData.currentprice" placeholder="请填写商品售价"></el-input>
              </el-form-item>
            </el-col>
            <!-- 商品原价输入框 -->
            <el-col :span="8" :offset="1">
              <el-form-item label="商品原价" prop="originalprice">
                <el-input v-model.number="productItemData.originalprice" placeholder="请填写商品原价"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 表单第三行 -->
          <el-row>
            <!-- 交易方式选择框 -->
            <el-col :span="8">
              <el-form-item label="交易方式" prop="deal">
                <el-select v-model="productItemData.deal" placeholder="请选择交易方式">
                  <!-- 循环渲染交易方式选项 -->
                  <el-option v-for="item in dealItem" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 表单第四行 -->
          <el-row>
            <!-- 商品图片上传组件 -->
            <el-col :span="20">
              <el-form-item label="商品图片">
                <el-upload
                  action=""
                  :limit="5"
                  :multiple="true"
                  list-type="picture-card"
                  :auto-upload="false"
                  :file-list="fileList"
                  :http-request="uploadFile"
                  ref="upload"
                  :on-change="handleChange"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 表单第五行 -->
          <el-row>
            <!-- 交易地址输入框 -->
            <el-col :span="20">
              <el-form-item label="交易地址" prop="address">
                <el-input v-model="productItemData.address" placeholder="请填写交易地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 表单第六行 -->
          <el-row>
            <!-- 商品描述输入框 -->
            <el-col :span="20">
              <el-form-item label="商品描述" prop="details">
                <el-input type="textarea" v-model="productItemData.details" rows="5" maxlength="100" placeholder="请填写商品描述"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 表单第七行 -->
          <el-row>
            <!-- 确认修改和重置按钮 -->
            <el-col :span="20" :offset="3">
              <el-button type="primary" @click="submitForm('productItemData')">确认修改</el-button>
              <el-button @click="loadProductDetail(productItemData.id)" type="info">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
    <!-- 添加页脚组件 -->
    <Footer />
  </div>
</template>

<script>
  // 引入页脚组件
  import Footer from './footer.vue'

  export default {
    // 定义组件的数据，以响应式的方式存储组件的状态
    data() {
      return {
        // 存储从后端获取的商品数据列表
        ProductData: [],
        // 搜索表单的数据对象，包含搜索条件
        formInline: {
          // 商品名称搜索条件，初始为 null
          name: null,
          // 商品类别搜索条件，初始为空字符串
          sid: '',
          // 交易方式搜索条件，初始为 null
          deal: null,
          // 商品状态搜索条件，初始为 null
          status: null
        },
        // 当前页码，默认显示第一页
        currentPage: 1,
        // 每页显示的数据条数，默认每页显示 12 条数据
        PageSize: 12,
        // 存储商品类别数据的数组
        SData: [],
        // 控制修改商品信息弹窗显示与隐藏的布尔值，初始为隐藏
        dialogVisible: false,
        // 标记是否对商品图片进行了操作，初始为未操作
        ifUpload: false,
        // 交易方式的可选列表
        dealItem: ['线上交易', '线下交易', '面谈'],
        // 存储当前要修改的商品信息
        productItemData: {},
        // 存储上传文件的列表信息
        fileList: [],
        // 存储上传文件的 URL 地址
        fileUrl: [],
        // 存储商品类型选择的值
        productItem: [],
        // 存储商品类型数据的数组
        productType: [],
        // 存储商品类型选项，用于级联选择器展示
        productTypeItem: [],
        // 表单验证规则，确保用户输入的数据符合要求
        rules: {
          // 商品名称验证规则
          name: [
            // 商品名称为必填项
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            // 商品名称长度需在 0 到 15 个字符之间
            { min: 0, max: 15, message: '长度在 0 到 15 个字符', trigger: 'blur' }
          ],
          // 商品类别验证规则，必须选择商品类别
          sid: [
            { required: true, message: '请选择商品类型', trigger: 'blur' }
          ],
          // 商品售价验证规则
          currentprice: [
            // 商品售价为必填项
            { required: true, message: '请输入商品售价', trigger: 'blur' },
            // 商品售价必须为非负数字
            { type: 'number', min: 0, message: '请输入正确的价格', trigger: 'blur' }
          ],
          // 商品原价验证规则
          originalprice: [
            // 商品原价为必填项
            { required: true, message: '请输入商品原价', trigger: 'blur' },
            // 商品原价必须为非负数字
            { type: 'number', min: 0, message: '请输入正确的价格', trigger: 'blur' }
          ],
          // 交易方式验证规则，必须选择交易方式
          deal: [
            { required: true, message: '请选择交易方式', trigger: 'blur' }
          ],
          // 交易地址验证规则，必须填写交易地址
          address: [
            { required: true, message: '请填写交易地址', trigger: 'blur' }
          ],
          // 商品描述验证规则，必须填写商品描述
          details: [
            { required: true, message: '请填写商品描述', trigger: 'blur' }
          ]
        }
      }
    },
    // 组件创建完成后自动调用的钩子函数，用于初始化数据
    created() {
      // 加载商品数据列表
      this.loadData();
      // 加载商品分类数据
      this.loadSidProduct();

      // 发送请求获取商品一二级分类数据
      this.$axios.get('/classify/selectFcScByList', {}).then(res => {
        let i = 0;
        res.data.forEach((data, index) => {
          if (index === 0) {
            // 处理第一条数据，初始化商品类型选项
            this.productTypeItem.push({
              value: data.id,
              label: data.name,
              children: [
                { value: data.sid, label: data.sname }
              ]
            });
          } else if (res.data[index - 1].id !== data.id) {
            // 如果当前数据的一级分类 ID 与上一条不同，添加新的一级分类选项
            i++;
            this.productTypeItem.push({
              value: data.id,
              label: data.name,
              children: [
                { value: data.sid, label: data.sname }
              ]
            });
          } else {
            // 如果一级分类 ID 相同，将当前二级分类添加到对应一级分类的子选项中
            this.productTypeItem[i].children.push({
              value: data.sid,
              label: data.sname
            });
          }
        });
      });
    },
    // 组件的方法集合，定义各种业务逻辑操作
    methods: {
      // 发送请求加载商品数据列表
      loadData() {
        this.$axios.post('/Bproduct/selectProductList', {
          // 传递商品名称搜索条件
          name: this.formInline.name,
          // 传递商品类别搜索条件
          sid: this.formInline.sid,
          // 传递交易方式搜索条件
          deal: this.formInline.deal,
          // 传递商品状态搜索条件
          status: this.formInline.status
        }).then(res => {
          // 打印响应数据，方便调试
          console.log(res);
          // 将后端返回的商品数据赋值给 ProductData
          this.ProductData = res.data;
        });
      },
      // 重置搜索表单并重新加载商品数据列表
      RestSubmit() {
        // 重置搜索表单的数据
        this.formInline = {
          name: null,
          sid: '',
          deal: null,
          status: null
        };
        // 重新加载商品数据列表
        this.loadData();
      },
      // 处理商品发布与下架操作
      statusClick(id, status) {
        // 根据操作类型生成提示信息
        let text = status === 1 ? '发布成功！' : '下架成功！';
        this.$axios.post('/product/updateProductByUser', {
          // 传递要操作的商品 ID
          id: id,
          // 传递要更新的商品状态
          status: status
        }).then(res => {
          if (res.data === 1) {
            // 操作成功，显示提示信息
            this.$message({
              type: 'success',
              message: text
            });
          }
          // 重新加载商品数据列表，更新页面显示
          this.loadData();
        });
      },
      // 加载商品详情信息并打开修改商品信息弹窗
      loadProductDetail(res) {
        // 显示修改商品信息弹窗
        this.dialogVisible = true;
        // 将选中的商品信息赋值给 productItemData
        this.productItemData = res;
        // 处理商品图片回显
        let images = eval('(' + res.images + ')');
        if (images !== undefined) {
          images.forEach(res => {
            // 将图片 URL 添加到文件列表中
            this.fileList.push({ url: res });
          });
        }
        // 加载商品分类数据并回显
        this.$axios.get('/classify/selectScById', {
          params: {
            // 传递商品类别 ID
            id: res.sid
          }
        }).then(resi => {
          // 清空商品类型选择值
          this.productItem = [];
          // 添加一级分类 ID
          this.productItem.push(resi.data.fcid);
          // 添加二级分类 ID
          this.productItem.push(resi.data.id);
          // 更新商品类别 ID
          this.productItemData.sid = resi.data.id;
        });
      },
      // 提交商品表单，先进行表单验证
      submitForm(productData) {
        this.$refs[productData].validate((valid) => {
          if (valid) {
            // 表单验证通过，提交图片
            this.subPicForm();
          } else {
            // 表单验证失败，终止操作
            return false;
          }
        });
      },
      // 上传商品图片的方法
      subPicForm() {
        // 创建 FormData 对象用于上传文件
        this.formDate = new FormData();
        // 触发上传组件提交文件
        this.$refs.upload.submit();
        let config = {
          headers: {
            // 设置请求头，以支持文件上传
            'Content-Type': 'multipart/form-data'
          }
        };
        if (this.ifUpload) {
          // 如果对图片进行了操作，发送请求上传图片
          this.$axios.post("/fileUpload/imgUpload", this.formDate, config).then(res => {
            // 重组文件 URL 列表
            res.data.forEach(resi => {
              this.fileUrl.push(resi);
            });
            // 将文件 URL 列表转换为 JSON 字符串
            this.productItemData.images = JSON.stringify(this.fileUrl);
            // 提交商品信息
            this.subProForm();
          });
        } else {
          // 如果未对图片进行操作，直接提交商品信息
          this.subProForm();
        }
      },
      // 修改商品信息的方法
      subProForm() {
        this.$axios.post('/product/updateProductByUser', {
          // 传递要修改的商品 ID
          id: this.productItemData.id,
          // 传递商品名称
          name: this.productItemData.name,
          // 传递商品类别 ID
          sid: this.productItemData.sid,
          // 传递商品售价
          currentprice: this.productItemData.currentprice,
          // 传递商品原价
          originalprice: this.productItemData.originalprice,
          // 传递交易方式
          deal: this.productItemData.deal,
          // 传递交易地址
          address: this.productItemData.address,
          // 传递商品描述
          details: this.productItemData.details,
          // 传递商品图片 URL 列表
          images: this.productItemData.images
        }).then(res => {
          // 重置图片操作标记
          this.ifUpload = false;
          // 重新加载商品数据列表
          this.loadData();
          // 关闭修改商品信息弹窗
          this.closedialog();
          if (res.data === 1) {
            // 商品修改成功，显示提示信息
            this.$message({
              message: '商品修改成功！',
              type: 'success'
            });
          }
        });
      },
      // 处理文件上传的方法，将文件添加到 FormData 中
      uploadFile(file) {
        this.formDate.append('file', file.file);
      },
      // 处理文件列表变化的方法，标记图片已操作并更新文件 URL 列表
      handleChange(value, fileList) {
        this.ifUpload = true;
        this.fileUrl = [];
        fileList.forEach(res => {
          if (res.status === "success") {
            // 将上传成功的文件 URL 添加到列表中
            this.fileUrl.push(res.url);
          }
        });
      },
      // 处理文件移除的方法，标记图片已操作并更新文件 URL 列表
      handleRemove(file, fileList) {
        this.ifUpload = true;
        this.fileUrl = [];
        fileList.forEach(res => {
          if (res.status === "success") {
            // 将上传成功的文件 URL 添加到列表中
            this.fileUrl.push(res.url);
          }
        });
      },
      // 监听商品类型选择变化的方法，更新商品类别 ID
      updateSid(value) {
        this.productItemData.sid = value[1];
      },
      // 发送请求加载商品分类数据
      loadSidProduct() {
        this.$axios.get('/classify/selectFcScByList', {}).then(res => {
          // 将后端返回的商品分类数据赋值给 SData
          this.SData = res.data;
        });
      },
      // 处理页码变化的方法，更新当前页码
      CurrentChange(val) {
        this.currentPage = val;
      },
      // 处理每页显示条数变化的方法，更新每页显示的数据条数
      SizeChange(val) {
        this.PageSize = val;
      },
      // 关闭修改商品信息弹窗的回调方法，重置相关数据
      closedialog() {
        // 隐藏修改商品信息弹窗
        this.dialogVisible = false;
        // 清空商品数据
        this.productData = '';
        // 清空文件列表
        this.fileList = [];
        // 清空文件 URL 列表
        this.fileUrl = [];
      },
      // 处理商品首页推荐与取消推荐的方法
      toRecommend(pid, index) {
        if (index === 1) {
          // 添加推荐操作
          this.$axios.get('/Bproduct/insertRecommendByPid', {
            params: {
              // 传递要推荐的商品 ID
              pid: pid
            }
          }).then(res => {
            // 推荐成功，显示提示信息
            this.$message({
              message: '推荐成功！',
              type: 'success'
            });
            // 重新加载商品数据列表
            this.loadData();
          });
        } else {
          // 取消推荐操作
          this.$axios.get('/Bproduct/deleteRecommendByPid', {
            params: {
              // 传递要取消推荐的商品 ID
              pid: pid
            }
          }).then(res => {
            // 取消成功，显示提示信息
            this.$message({
              message: '取消成功！',
              type: 'success'
            });
            // 重新加载商品数据列表
            this.loadData();
          });
        }
      }
    }
  }
</script>

<style>
  /* 设置表格样式，使表格内容居中显示，设置高度并允许滚动 */
  .el-table {
    text-align-last: center;
    height: 733px;
    overflow: auto;
  }
  /* 设置页面主容器样式，添加内边距、外边距，设置最小高度和背景颜色 */
  .contationAccount {
    padding: 20px;
    margin: 10px;
    margin-top: 0;
    min-height: 855px;
    background-color: #FFFFFF;
  }
  /* 设置分页组件样式，添加顶部和右侧外边距，使其靠右显示 */
  .el-pagination {
    margin-top: 20px;
    margin-right: 30px;
    float: right;
  }

  /* 移动端适配样式，当屏幕宽度小于等于 768px 时生效 */
  @media screen and (max-width: 768px) {
    /* 调整页面主容器样式，减少内边距和外边距，宽度占满屏幕 */
    .contationAccount {
      padding: 10px;
      margin: 5px;
      width: 100%;
    }
    /* 调整分页组件样式，减少外边距，取消浮动，使其居中显示 */
    .el-pagination {
      margin: 10px;
      float: none;
      text-align: center;
    }
  }
</style>